條件渲染 v-if / v-if-else

v-if 和 v-if-else 作為渲染的條件判斷，觸發 v-if / v-if-else 時，如果符合條件，元素及所有指令組件都會被重構，如果不符合，則不會做渲染動作。

這裡雖然沒有提到 v-else，但其實 v-else 跟 v-if 、 v-if-else 通常也是配合著存在的。v-else 必須跟在一個 v-if 或是 v-else-if 元素的後面才會被識別：

<!-- 官方範例 -->
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-if-else 也同樣必須跟在 v-if 或 v-else-if 後面才能觸發。

常見的分頁頁籤也可以見到它們的影子：

<div id="app">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link" :class="{ 'active':link == 'a' }" @click.prevent="link = 'a'" href="#">
        分頁 A
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" :class="{ 'active':link == 'b' }" @click.prevent="link = 'b'" href="#">
        分頁 B
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" :class="{ 'active':link == 'c' }" @click.prevent="link = 'c'" href="#">
        分頁 C
      </a>
    </li>
  </ul>
  <div class="content mt-3">
    <div v-if="link == 'a'">內容 A</div>
    <div v-else-if="link == 'b'">內容 B</div>
    <div v-else-if="link == 'c'">內容 C</div>
  </div>
</div>

CodePen：https://codepen.io/kimberly8/pen/BaxamJV?editors=1010

這裡我用自己的理解來解釋一下範例程式碼的邏輯：

• 使用 v-on:click 觸發事件，使資料的內容變更，當我們點擊分頁時，link 會將資料變更為我們賦予他的值。
• :class="{ 'active':link == 'c' }" 為動態切換，依照 link 的資料切換 active的狀態。
• v-if / v-else / v-else-if 在這些元素裡面做條件判斷，如果符合 link == 'a' 則滿足條件並呈現「內容A」。

➔
任務：
請操作 這個模板 ( 只能操作 HTML 的部分 )，使用 v-if, v-else-if 的觀念撰寫答案。

解答：

<div id="app">
  <div class="container mt-3">
    <button 
      type="button" 
      class="me-3"
      @click="current = '小明'"
    >
      小明
    </button>
    <button 
      type="button"
      @click="current = '漂亮阿姨'"
    >
      漂亮阿姨
    </button>
    <!-- 區塊一 -->
    <div v-if="current === '小明'">
      此區塊屬於 小明
    </div>
    <!-- 區塊二 -->
    <div v-else-if="current === '漂亮阿姨'">
      此區塊屬於 漂亮阿姨
    </div>
  </div>
</div>

在這裡要先跟各位有在看文章的朋友們說聲抱歉，這篇是最後一篇更新了，原本說不確定能不能完成是因為工作剛換了新環境，必須專注於工作之餘，很擔心無法兼顧到鐵人賽。

想著或許就試試看，能撐就撐，不能撐也只好放棄比賽，於是下了班也盡量在理解工作內容以外還繼續寫了任務、搜尋 Vue 觀念並寫成文章，本來這些都還加減可以持續，卻在這幾天突然發現家裡心愛的毛孩生了重病，這個巨大的打擊讓我的情緒大受影響，同時也開始思考自己在這種狀態下，有沒有辦法再兼顧這麼多事，經過深思熟慮後決定跟大家說聲抱歉，並且真心感謝這幾天有看文章的朋友，等待自己逐漸釋懷並恢復平靜，或許之後我們有緣再見了。（下台鞠躬

參考資料
v-if / v-else / v-else-if 條件渲染